<template>
  <div class="report-main">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <div class="report-search">
      <div class="report-search-box">
        <single-list-filter-without-cb :filter="filterN" :type="'siYearInterval'"
                                       :leftTipText="'年份'"
                                       @confirmSingleSelect="confirmSingleSelectYears" ref="yearTypeId">
        </single-list-filter-without-cb>
        <a class="import-excel-text" :href="importExcelReport()"
           download="exportTownWorksBasicMedicareExcel">导出</a>
        <svg class="all-close-btn icon-svg" v-show="!fullScreen" @click="closeAll" viewBox="0 0 612 792">
          <path :d="svgPath.closeFullScreen"/>
        </svg>
      </div>
    </div>
    <div class="report-wrapper">
      <div id="report-loading-personal-pension" class="report-loading" v-show="showLoading"></div>
      <keep-alive>
        <component v-bind:is="currentTabComponent" :siStatus="siStatus" :queryYear="queryYear" v-show="!showLoading"></component>
      </keep-alive>
    </div>
  </div>
</template>
<script>
  import SingleListFilterWithoutCb from '../last/filter/single-list-filter-without-checkbox.vue'
  import {svgPath, quitFullScreen, loadingOpt} from "../../assets/js/utils";
  import {getSearchItems, baseApiF} from '../../api/api'
  import YearMonth from '../view/year-month.vue'
  import PersonPension from './person-pension.vue'
  import {geOldPensionReport} from '../../api/report'
  import {
    getDefaultSiYearInterval
  } from '../last/chart/utils/dataUtils'
  export default {
    props: ['isChange', 'fullScreen'],
    components: {
      YearMonth,
      SingleListFilterWithoutCb,
      PersonPension
    },
    data() {
      return {
        showLoading: true,
        siStatus: null,
        svgPath: svgPath,
        canShow: true,
        filterN: null,
        currentTabComponent: PersonPension,
        insuredType: '1001',
        queryYear: '',
        queryMonth: ''
      }
    },
    watch: {
      isChange(){
        if (document.querySelector('.el-header')) {
          this.canShow = true;
        } else {
          this.canShow = false;
        }
      }
    },
    mounted() {
      this.myChart = this.$echarts.init(document.getElementById('report-loading-personal-pension'), null, {renderer: 'canvas'})
      //获取筛选数据
      getSearchItems('init/initInput').then((res) => {
        if (res.code == 0) {
          this.filterN = res.data;
          this.queryYear = getDefaultSiYearInterval() + ''
//          this.$refs.yearMonth.setDefaultMonthAndPosition(this.queryYear)
          this.getStateData()
        }
      });
    },
    methods: {
      getStateData(){
        //给echart 加loading效果
        this.showLoading = true;
        this.myChart.showLoading(loadingOpt)
        geOldPensionReport(this.queryYear).then(response => {
          this.showLoading = false;
          this.myChart.hideLoading()
          if (response.code == 0) {
            this.siStatus = response
          }
        }).catch(err => {
        })
      },
      importExcelReport(){
        let importExcelUrl = baseApiF() +
          `geRen/exportgeRenYangLaoExcel?selectDate=${this.queryYear}`
        return importExcelUrl
//        return 'javascript:;'
      },
      closeAll(){
        quitFullScreen();
      },
      confirmSingleSelectYears(year, month, yearMonth) {
        this.queryYear = year + ''
        this.queryMonth = month + ''
        this.yearMonth = yearMonth
        console.log('fffffffffffff ' + year + '  ' + month + " " + yearMonth)
        this.getStateData()
      },
      confirmSingleSelectSocialInsurance(filter) {
        if (filter == 1001) {
          this.currentTabComponent = OldSiState
        } else if (filter == 1002) {
          this.currentTabComponent = MedSiState
        } else if (filter == 1003) {
          this.currentTabComponent = WorkHurtSiState
        } else if (filter == 1004) {
          this.currentTabComponent = LoseJobSiState
        } else if (filter == 1005) {
          this.currentTabComponent = BornSiState
        }
        this.insuredType = filter + ''
        this.getStateData()
      }
    }
  }
</script>
<style scoped>
  @import "../../assets/css/report.css";
</style>
